<template>
  <view
    class="content"
    :style="{ height: setHeight + 'px', background: '#fff' }"
  >
    <view class="wrap">
      <view class="title">
        <view class="empty"></view>
        <view class="subTitle">个人求职信息登记</view>
      </view>
      <view class="box">
        <u-form :model="form" ref="uForm" :errorType="errorType">
          <u-form-item
            :leftIconStyle="{ color: '#f00', fontSize: '14rpx' }"
            left-icon="star-fill"
            :label-style="{ fontSize: '14px', color: '#666666' }"
            label-width="180"
            label="用户姓名:"
            prop="jhName"
          >
            <u-input
              border
              v-model="form.jhName"
              placeholder="请输入姓名"
              maxlength="10"
            />
          </u-form-item>
          <u-form-item
            :leftIconStyle="{ color: '#f00', fontSize: '14rpx' }"
            left-icon="star-fill"
            :label-style="{ fontSize: '14px', color: '#666666' }"
            label-width="180"
            label="联系电话:"
            prop="jhPhone"
          >
            <u-input
              border
              v-model="form.jhPhone"
              maxlength="11"
              placeholder="请输入联系电话"
              type="number"
            />
          </u-form-item>
          <u-form-item
            :label-style="{ fontSize: '14px', color: '#666666' }"
            label-width="180"
            label="个人擅长:"
            prop="jhSpeciality"
          >
            <view class="inputBg">
              <view
                class="inputItem"
                v-for="(item, index) in goodAtData"
                :key="index"
              >
                <u-input
                  border
                  :style="{ marginTop: index == 0 ? '0' : '16rpx' }"
                  v-model="item.val"
                  placeholder="请输入多项个人擅长"
                  maxlength="12"
                  :clearable="false"
                />
                <u-icon
                  name="plus-circle"
                  size="40"
                  style="margin-left: 16rpx"
                  v-show="index == 0"
                  @click="addGoodAt()"
                ></u-icon>
                <u-icon
                  name="minus-circle"
                  size="40"
                  style="margin-left: 16rpx"
                  v-show="index != 0"
                  @click="delGoodAt(index)"
                ></u-icon>
              </view>
            </view>
          </u-form-item>
          <u-form-item
            :leftIconStyle="{ color: '#f00', fontSize: '14rpx' }"
            left-icon="star-fill"
            :label-style="{ fontSize: '14px', color: '#666666' }"
            label-width="180"
            label="求职职位:"
            prop="jhPosition"
          >
            <view class="inputBg">
              <view
                class="inputItem"
                v-for="(item, index) in positionData"
                :key="index"
              >
                <u-input
                  border
                  :style="{ marginTop: index == 0 ? '0' : '16rpx' }"
                  v-model="item.val"
                  placeholder="请输入职位"
                  maxlength="12"
                  :clearable="false"
                />
                <u-icon
                  name="plus-circle"
                  size="40"
                  style="margin-left: 16rpx"
                  v-show="index == 0"
                  @click="addPostion()"
                ></u-icon>
                <u-icon
                  name="minus-circle"
                  size="40"
                  style="margin-left: 16rpx"
                  v-show="index != 0"
                  @click="delPostion(index)"
                ></u-icon>
              </view>
            </view>
          </u-form-item>
          <u-form-item
            :label-style="{ fontSize: '14px', color: '#666666' }"
            label-width="180"
            label="居住地址:"
            prop="jhAddress"
          >
            <u-input
              border
              v-model="form.jhAddress"
              placeholder="请输入居住地址"
              maxlength="250"
            />
          </u-form-item>
          <u-form-item
            :leftIconStyle="{ color: '#f00', fontSize: '14rpx' }"
            left-icon="star-fill"
            :label-style="{ fontSize: '14px', color: '#666666' }"
            label-width="180"
            label="薪资要求:"
            prop="jhSalary"
          >
            <u-input
              border
              v-model="form.jhSalary"
              placeholder="请输入薪资要求"
              type="number"
            />
          </u-form-item>
          <u-form-item
            :leftIconStyle="{ color: '#f00', fontSize: '14rpx' }"
            left-icon="star-fill"
            :label-style="{ fontSize: '14px', color: '#666666' }"
            label-width="185"
            label="开始时间"
            prop="jhBegindate"
          >
            <u-input
              border
              v-model="form.jhBegindate"
              disabled
              placeholder="请选择"
              type="text"
              @click="timeShow = true"
            />
          </u-form-item>
          <u-form-item
            :leftIconStyle="{ color: '#f00', fontSize: '14rpx' }"
            left-icon="star-fill"
            :label-style="{ fontSize: '14px', color: '#666666' }"
            label-width="185"
            label="结束时间"
            prop="jhEnddate"
          >
            <u-input
              border
              v-model="form.jhEnddate"
              disabled
              placeholder="请选择"
              type="text"
              @click="timeShow2 = true"
            />
          </u-form-item>
          <!-- <u-form-item :leftIconStyle="{ color: '#f00', fontSize: '14rpx' }" left-icon="star-fill" :label-style="{ fontSize: '14px', color: '#666666' }" label-width="180" label="开始时间:" prop="jhBegindate">
            <picker border mode="date" :value="form.jhBegindate" :start="startDate" fields="day" @change="bindDateChange" style="width: 100%; height: 35px">
              <view style="fontsize: 14px; color: #666666; border: 1px solid #dcdfe6; border-radius: 4px; padding: 0 5%">{{ form.jhBegindate == '' ? '请选择' : form.jhBegindate }}</view>
            </picker>
          </u-form-item>
          <u-form-item :leftIconStyle="{ color: '#f00', fontSize: '14rpx' }" left-icon="star-fill" :label-style="{ fontSize: '14px', color: '#666666' }" label-width="180" label="结束时间:" prop="jhEnddate">
            <picker border mode="date" :value="form.jhEnddate" :start="date" fields="day" @change="bindDateChange2" style="width: 100%; height: 35px">
              <view style="fontsize: 14px; color: #666666; border: 1px solid #dcdfe6; border-radius: 4px; padding: 0 5%">{{ form.jhEnddate == '' ? '请选择' : form.jhEnddate }}</view>
            </picker>
          </u-form-item> -->
          <u-form-item
            :label-style="{ fontSize: '14px', color: '#666666' }"
            label-width="180"
            prop="jhImage"
            label="个人案例:"
          >
            <u-upload
              width="160"
              height="160"
              ref="uUpload"
              :action="action"
              :max-size="10 * 1024 * 1024"
              max-count="5"
              :custom-btn="true"
              :show-progress="true"
              :multiple="true"
              :source-type="['album']"
              :header="header"
            >
              <view
                slot="addBtn"
                class="slot-btn"
                hover-class="slot-btn__hover"
                hover-stay-time="150"
              >
                <u-icon
                  name="plus"
                  size="60"
                  :color="$u.color['lightColor']"
                ></u-icon>
              </view>
            </u-upload>
          </u-form-item>
          <view class="sumbitWrap">
            <view class="buttonBox">
              <u-button type="primary" @click="submit()">提交</u-button>
            </view>
          </view>
        </u-form>
      </view>
      <u-picker
        v-model="timeShow"
        mode="time"
        @confirm="bindDateChange"
      ></u-picker>
      <u-picker
        v-model="timeShow2"
        mode="time"
        @confirm="bindDateChange2"
      ></u-picker>
      <!-- <picker v-model="timeShow" mode="date" @change="bindDateChange"></picker> -->
      <!-- <picker v-model="timeShow" mode="date" :value="form.jhBegindate" fields="day" @change="bindDateChange" style="width: 100px; height: 30px">
        <view border>{{ form.jhBegindate }}</view>
      </picker> -->
    </view>
  </view>
</template>

<script>
import api from "@/common/utils/api"; //接口
import { ref } from "vue";
import urlConfig from "@/common/utils/config";
import { removeEmoji } from "@/common/utils/index";
export default {
  data() {
    return {
      action: urlConfig.base_url + "/admin/resource/upload",
      header: {
        openId: uni.getStorageSync("wxOpenId"),
      },
      startDate: null,
      endDate: null,
      imgAdress: urlConfig.base_url + "/upload/getImage?fileName=",
      form: {
        jhName: "",
        jhPhone: "",
        jhSpeciality: "",
        jhPosition: "",
        jhAddress: "",
        jhSalary: "",
        jhBegindate: "",
        // jhBegindate: Date.now(),
        jhEnddate: "",
        jhImage: "",
        jhReleaseType: "",
        submitTime: "",
      },

      date: "",
      rules: {
        jhName: [
          {
            required: true,
            message: "请输入姓名",
            trigger: ["change", "blur"],
          },
        ],
        jhPhone: [
          {
            required: true,
            message: "请输入联系电话",
            trigger: ["change", "blur"],
          },
          {
            validator: (rule, value, callback) => {
              return this.$u.test.mobile(value);
            },
            message: "请输入正确的手机号码",
            trigger: ["change", "blur"],
          },
        ],
        // jhAddress: [
        //   {
        //     validator: (rule, value, callback) => {
        //       return this.$u.test.noSpecial(value)
        //     },
        //     message: '请勿输入特殊字符！',
        //     trigger: ['change', 'blur']
        //   }
        // ],
        jhSalary: [
          {
            required: true,
            message: "请输入薪资要求",
            trigger: ["change", "blur"],
          },
          {
            validator: (rule, value, callback) => {
              return this.$u.test.range(value, [1, 99999]);
            },
            message: "请输入正确的薪资要求",
            trigger: ["change", "blur"],
          },
        ],
        jhBegindate: [
          {
            required: true,
            message: "请输入开始时间",
            trigger: ["change", "blur"],
          },
        ],
        jhEnddate: [
          {
            required: true,
            message: "请输入结束时间",
            trigger: ["change", "blur"],
          },
        ],
      },
      errorType: ["toast"],
      timeShow: false,
      timeShow2: false,
      goodAtData: [
        {
          id: "0",
          val: "",
        },
      ],
      positionData: [
        {
          id: "0",
          val: "",
        },
      ],
    };
  },
  created() {
  },
  onLoad(item) {},
  mounted() {},
  computed: {
    setHeight() {
      try {
        const res = uni.getSystemInfoSync();
        return res.windowHeight; //屏幕高度
      } catch (e) {}
    },
  },
  methods: {
    formatDate(time, cFormat = null) {
      const format = cFormat || "{y}-{m}-{d}";
      const date = new Date(time);
      const formatObj = {
        //年
        y: date.getFullYear(),
        //月
        m: date.getMonth() + 1,
        //日
        d: date.getDate(),
        //小时
        h: date.getHours(),
        //分钟
        i: date.getMinutes(),
        //秒
        s: date.getSeconds(),
        //星期
        a: date.getDay(),
      };
      const time_str = format.replace(/{([ymdhisa])+}/g, (result, key) => {
        const value = formatObj[key];
        // Note: getDay() returns 0 on Sunday
        if (key === "a") {
          return ["日", "一", "二", "三", "四", "五", "六"][value];
        }
        //padStart用于字符串头部补全，2个字符，如果不够前面补0
        return value.toString().padStart(2, "0");
      });
      return time_str;
    },

    bindDateChange: function (e) {
      //选择日期
      console.log("date", e);
      this.form.jhBegindate = e.year + "-" + e.month + "-" + e.day;
    },
    bindDateChange2: function (e) {
      //选择日期
      console.log("date", e);
      this.form.jhEnddate = e.year + "-" + e.month + "-" + e.day;
    },

    addGoodAt(e) {
      console.log(this.goodAtData);
      if (this.goodAtData.length == 5) {
        uni.showToast({
          title: "最多5条",
          icon: "none",
        });
        return;
      }
      this.goodAtData.push({ id: this.goodAtData.lenght + 1, val: "" });
    },
    delGoodAt(index) {
      console.log(index);
      this.goodAtData.splice(index, 1);
    },
    addPostion() {
      if (this.positionData.length == 5) {
        uni.showToast({
          title: "最多5条",
          icon: "none",
        });
        return;
      }
      this.positionData.push({ id: this.positionData.lenght + 1, val: "" });
    },
    delPostion(index) {
      this.positionData.splice(index, 1);
    },
    submit() {
      this.$refs.uForm.validate((valid) => {
        if (valid) {
          if (this.positionData[0].val == "") {
            uni.showToast({
              title: "请输入求职职位！",
              icon: "none",
            });
            return;
          }
          if (this.$u.test.noSpecial(this.form.jhAddress)) {
            uni.showToast({
              title: "居住地址请勿输入特殊字符！",
              icon: "none",
            });
            return;
          }
          if (
            !removeEmoji(this.form.jhName) ||
            !removeEmoji(this.form.jhPhone) ||
            !removeEmoji(this.form.jhSalary)
          ) {
            uni.showToast({
              title: "不得输入emoji表情！",
              icon: "none",
            });
            return;
          }
          if (true) {
            let cDate1 = this.formatDate(new Date());
            let cDate = new Date(cDate1);
            let sDate = new Date(this.form.jhBegindate);
            let eDate = new Date(this.form.jhEnddate);
            if (sDate < cDate) {
              uni.showToast({
                title: "开始时间不得小于当前时间！",
                icon: "none",
              });
              return;
            }
            if (eDate < sDate) {
              uni.showToast({
                title: "结束时间不得小于开始时间！",
                icon: "none",
              });
              return;
            }
          }

          uni.showLoading({
            title: "加载中",
          });
          this.goodAtData.map((item, index) => {
            if (item.val != "") {
              this.form.jhSpeciality += item.val + ",";
            }
          });
          this.form.jhSpeciality = this.form.jhSpeciality.slice(
            0,
            this.form.jhSpeciality.length - 1
          );
          this.positionData.map((item, index) => {
            if (item.val != "") {
              this.form.jhPosition += item.val + ",";
            }
          });
          this.form.jhPosition = this.form.jhPosition.slice(
            0,
            this.form.jhPosition.length - 1
          );
          // console.log(this.$refs.uUpload)
          if (this.$refs.uUpload.lists.length > 0) {
            this.form.jhImage = "";
            this.$refs.uUpload.lists.map((item) => {
              this.form.jhImage += item.response.data + ",";
            });
            this.form.jhImage = this.form.jhImage.slice(
              0,
              this.form.jhImage.length - 1
            );
          }
          console.log(this.form);
          api
            .addPersonJobHunt(this.form)
            .then((res) => {
              if (res.success) {
                uni.hideLoading();
                uni.showToast({
                  title: res.msg,
                  icon: "none",
                  mask: true,
                });
                setTimeout(function () {
                  uni.navigateBack();
                }, 1000);
              }
            })
            .finally((e) => {});
        }
      });
    },
  },
  // 必须要在onReady生命周期，因为onLoad生命周期组件可能尚未创建完毕
  onReady() {
    this.$refs.uForm.setRules(this.rules);
  },
};
</script>

<style scoped>
.content {
  display: flex;
  flex-direction: column;
  font-size: 30rpx;
}

.wrap {
  padding: 34rpx;
}

.box {
  margin-top: 30rpx;
  padding: 10rpx 20rpx;
  background: #f7f7f7;
  border-radius: 10rpx;
}

.inputBg {
  display: flex;
  flex-direction: column;
}
.inputItem {
  display: flex;
  flex-direction: row;
}

.title {
  display: flex;
  align-items: center;
  height: 44rpx;
}

.empty {
  width: 8rpx;
  height: 30rpx;
  background: #00be6e;
  border-radius: 4rpx;
  margin-right: 10rpx;
}

.subTitle {
  font-size: 32rpx;
  color: #212121;
}

.slot-btn {
  width: 160rpx;
  height: 160rpx;
  display: flex;
  justify-content: center;
  align-items: center;
  background: #fcfcfc;
  border-radius: 10rpx;
  margin: 5px;
}

.slot-btn__hover {
  background-color: rgb(235, 236, 238);
}

.sumbitWrap {
  display: flex;
  justify-content: center;
  width: 100%;
}

.buttonBox {
  /* width: 50%; */
  margin-top: 100rpx;
  width: 80%;
}
</style>
